let swiperwrappe = document.querySelector(".viewport .left-2  .swiper1 ul");
let span = document.querySelectorAll(".left-2 .swiper .tabs span");
let right = document.querySelectorAll(".right .order .filter a");
let h4 = document.querySelectorAll(".right .order .inner .data h4");
const sup = document.querySelector(".top .inner .province .data .sup");
const sub1 = document.querySelector(".top .inner .province .data .sub1 .sub");
const lb = document.querySelectorAll(".right .sales .inner .caption a");
console.log(sup);
console.log(sub1);
let ding;
let ding2;
let abc = 0;
let index = 1;
let index1 = 0;
let i = 0;
let index2 = 1;
let j;
let p;
let duan = true;
// aisox
function qieaixoa(type = "gz") {
  return new Promise((a, b) => {
    if (duan) {
      axios(`http://localhost:3000/swiper?type=${type}`).then((rse) => {
        a(rse.data);
      });
    } else {
      b();
    }
  });
}
// 渲染
function applycolours(data) {
  let html = "";
  data.forEach((itam) => {
    html += `
        <li>
          <span>${itam.time}</span>
          <span>${itam.neme}</span>
          <span>${itam.abnormal}</span>
        </li>
        `;
  });
  swiperwrappe.innerHTML = html;
}
// 监控轮播图
function qie() {
  return new Promise((rem, rejec) => {
    if (pai) {
      let gao = Math.floor(swiperwrappe.clientHeight / 10);
      console.log(gao);
      clearInterval(ding);
      ding = setInterval(function () {
        abc++;
        swiperwrappe.style.transform = `translate3d(0,-${abc}px,0)`;
        if (abc === gao) {
          abc = 0;
          swiperwrappe.appendChild(swiperwrappe.children[0]);
          swiperwrappe.style.transform = `translate3d(0,-${abc}px,0)`;
        }
      }, 20);
      rem();
    } else {
      rejec;
    }
  });
}
// 监控切换
function qiehuan() {
  span.forEach((itam, index) => {
    itam.onclick = function () {
      for (let i = 0; i < span.length; i++) {
        span[i].classList.remove("bao");
      }
      span[index].classList.add("bao");
      let { type } = itam.dataset;
      init(type);
    };
  });
}
// 监控放上停止，离开播放
function yiqu() {
  return new Promise((rem, rejec) => {
    if (pai) {
      let swiperwrappeli = document.querySelectorAll(
        ".viewport .left-2  .swiper .swiper-wrapper li"
      );
      // swiperwrappe.addEventListener("mouseover", function (e) {
      //   if (e.target.nodeName === "LI") {
      //     e.target.classList.add("sho");
      //     clearInterval(ding);
      //   }
      // });
      // swiperwrappe.addEventListener("mouseout", function (e) {
      //   if (e.target.nodeName === "LI") {
      //     e.target.classList.remove("sho");
      //     qie();
      //   }
      // });
      swiperwrappeli.forEach((itam, index) => {
        itam.onmouseover = function () {
          swiperwrappeli[index].classList.add("sho");
          clearInterval(ding);
        };
        itam.onmouseout = function () {
          swiperwrappeli[index].classList.remove("sho");
          qie();
        };
      });
      rem();
    } else {
      rejec();
    }
  });
}
// 天数报亮
function skycut() {
  setInterval(() => {
    for (let i = 0; i <= 4; i++) {
      if (i === 3) {
        h4[0].innerHTML = 987;
        h4[1].innerHTML = 834;
      }
    }
    right[index].classList.add("show");
    index++;
    if (index === 4) {
      index = 0;
    }
    if (index === 1) {
      h4[0].innerHTML = "20,301,987";
      h4[1].innerHTML = 99834;
    }
    if (index === 2) {
      h4[0].innerHTML = "301,987";
      h4[1].innerHTML = 9834;
    }
    if (index === 3) {
      h4[0].innerHTML = "1,987";
      h4[1].innerHTML = "3834";
    }
  }, 3000);
}
// 天数清除
function content() {
  setInterval(() => {
    for (let i = 0; i < right.length; i++) {
      right[i].classList.remove("show");
    }
    // index1++;
    // if (index1 === 4) {
    //   index1 = 0;
    // }
  }, 3000);
}
// 销售添加
function tjian() {
  let index10 = 1;
  let tjia = setInterval(() => {
    lb[index10].classList.add("active");
    console.log(lb);
    index10++;
    console.log(index10);
    if (index10 === 4) {
      // clearInterval(tjia);
      // tjian()
      index10 = 0;
    }
  }, 2800);
}
// 销售清楚
(function () {
  setInterval(() => {
    for (let i = 0; i < lb.length; i++) {
      lb[i].classList.remove("active");
    }
  }, 2500);
})();
// 排行榜
// (function () {
//   j = setInterval(() => {
//     sub1[i].classList.remove("active");
//     sup[i].classList.remove("bao");
//     i++;
//     if (p) {
//       sup[p].classList.remove("zaijian");
//       sub1[p].classList.remove("nihao");
//     }
//     if (p === 0) {
//       sup[p].classList.remove("zaijian");
//       sub1[p].classList.remove("nihao");
//     }
//     if (i === 5) {
//       sub1[0].classList.add("active");
//       sup[0].classList.add("bao");
//       i = 0;
//     } else {
//       sup[i].classList.add("bao");
//       sub1[i].classList.add("active");
//     }
//   }, 3000);
// })();
// 排行榜切换
// (function () {
//   sup.forEach((itam, index4) => {
//     itam.onmouseover = function () {
//       sup[index4].classList.add("zaijian");
//       sub1[index4].classList.add("nihao");
//       sub1[i].classList.remove("active");
//       sup[i].classList.remove("bao");
//       p = index4;
//     };
//     itam.onmouseout = function () {
//       sup[index4].classList.remove("zaijian");
//       sub1[index4].classList.remove("nihao");
//       sub1[i].classList.add("active");
//       sup[i].classList.add("bao");
//     };
//   });
// })();
// 点击切换
(function () {
  right.forEach((itam, index) => {
    itam.onclick = function () {
      for (let i = 0; i < right.length; i++) {
        right[i].classList.remove("show");
      }
      right[index].classList.add("show");
      if (index === 0) {
        h4[0].innerHTML = "20,301,987";
        h4[1].innerHTML = 99834;
      }
      if (index === 1) {
        h4[0].innerHTML = "301,987";
        h4[1].innerHTML = 9834;
      }
      if (index === 2) {
        h4[0].innerHTML = "1,987";
        h4[1].innerHTML = "3834";
      }
      if (index === 3) {
        h4[0].innerHTML = 987;
        h4[1].innerHTML = 834;
      }
    };
  });
})();
// 排行榜获取标题aixos,渲染
(function () {
  let index11 = 1;

  axios("http://localhost:3000/nationwide").then((esr) => {
    drawing(esr.data);
    txiao();
  });
  // 渲染
  function drawing(data) {
    let html = "";
    data.forEach((itam, index) => {
      if (index === 0) {
        html += `   
        <li class="bao" data-rype="${itam.type}">
         <span>${itam.type}</span>
         <span>${itam.shuju}<s class="icon-up"></s></span>
       </li>
       `;
      } else {
        html += `   
        <li data-rype="${itam.type}">
         <span>${itam.type}</span>
         <span>${itam.shuju}<s class="icon-up"></s></span>
       </li>
       `;
      }
    });
    sup.innerHTML = html;
  }
  let supli;
  // 添加
  function txiao() {
    supli = document.querySelectorAll(".top .inner .province .data .sup li");
    let rr;
    setInterval(() => {
      supli[index11].classList.add("bao");
      rr = supli[index11].dataset.rype;
      index11++;
      if (index11 === 5) {
        index11 = 0;
      }
      aaa(rr);
    }, 2000);
    function aaa(rr) {
      axios(`http://localhost:3000/nationwide?type=${rr}`).then((esr) => {
        // console.log(esr.data[0].nr);
        drawing2(esr.data[0].nr);
      });
      console.log(rr);
      function drawing2(data) {
        let html = "";
        data.forEach((itam, index) => {
          html += `   
        <li>
          <span>${itam.name}</span
          ><span>${itam.shu}<s class="icon-up"></s></span>
        </li>
        `;
        });
        sub1.innerHTML = html;
      }
    }
    aaa("北京");
  }
  // 清除
  function qingchu() {
    setInterval(() => {
      for (let k = 0; k < 5; k++) {
        supli[k].classList.remove("bao");
      }
    }, 2000);
  }
  qingchu();
})();
// 排行榜获取内容aixos,渲染
(function () {})();
// 初始化
async function init(type) {
  let data = await qieaixoa(type);
  applycolours(data);
  qie();
  yiqu();
  qiehuan();
}
init();
content();
skycut();
